<template>
	<view class="page-fade-in" :style="{opacity: pageOpc}">
		<template v-if="pageOpc">
			<view class="content">
				<view class="function-box">
					<view class="function-item flexWrap">
						<view class="th1">功能名称</view>
						<view class="th2">是否显示</view>
						<view class="th3">操作</view>
					</view>
					<view class="function-item flexWrap">
						<view class="th1">任务挑战</view>
						<view class="th2">
							<switch style="transform: scale(.8);" color="#42b983" :checked="task_challenge==1" :data-index="1"  @change="changeSwitch"></switch>
						</view>
						<view  class="th3" @tap="goPage('/pages/manage/taskList')">设置</view>
					</view>
					<view class="function-item flexWrap">
						<view class="th1">开门(麻将适用)</view>
						<view class="th2">
							<switch style="transform: scale(.8);" color="#42b983" :checked="open==1" :data-index="2"  @change="changeSwitch"></switch>
						</view>
						<view  class="th3" @tap="goPage('/moduleB/manage/openDoorSet')">设置</view>
					</view>
					<view class="function-item flexWrap">
						<view class="th1">路线图</view>
						<view class="th2">
							<switch style="transform: scale(.8);" color="#42b983" :checked="position_navigation==1" :data-index="3"  @change="changeSwitch"></switch>
						</view>
						<view  class="th3" @tap="goPage('/moduleB/manage/setRoad')">设置</view>
					</view>
					<view class="function-item flexWrap">
						<view class="th1">记分牌</view>
						<view class="th2">
							<switch style="transform: scale(.8);" color="#42b983" :checked="scoreboard==1" :data-index="4"  @change="changeSwitch"></switch>
						</view>
						<view  class="th3"></view>
					</view>
					<view class="function-item flexWrap">
						<view class="th1">联系客服</view>
						<view class="th2">
							<switch style="transform: scale(.8);" color="#42b983" :checked="contact_customers==1" :data-index="5"  @change="changeSwitch"></switch>
						</view>
						<view  class="th3" @tap="goPage('/pages/index/shopInfo?modelFlag=1')">设置</view>
					</view>
					<view class="function-item flexWrap">
						<view class="th1">一键wifi</view>
						<view class="th2">
							<switch style="transform: scale(.8);" color="#42b983" :checked="one_click_wifi==1" :data-index="6"  @change="changeSwitch"></switch>
						</view>
						<view  class="th3" @tap="goPage('/moduleB/manage/setWifi')">设置</view>
					</view>
					<view class="function-item flexWrap">
						<view class="th1">随机立减</view>
						<view class="th2">
							<switch style="transform: scale(.8);" color="#42b983" :checked="is_open_random_coupon==1" :data-index="7"  @change="changeSwitch"></switch>
						</view>
						<view  class="th3" @tap="goPage('/moduleB/setRandomCoupon')">设置</view>
					</view>
				</view>
				<view class="bottom-box flexWrapNo">
					<view class="define-btn" @tap="changeStatus()">提交保存</view>
				</view>
				
				<!--操作指引悬浮按钮 -->
				<guideline :path="'moduleB/manage/function'"></guideline>
			</view>
		</template>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageOpc:0,
				position_navigation:0,//位置导航
				tuan_verification_coupon:0,//团购验券
				contact_customers:0,//联系客服
				one_click_wifi:0,//一键wifi
				franchise_consulting:0,//加盟咨询
				is_open_random_coupon:0,//我要加盟
				open:0,//开门
				task_challenge:0,
				scoreboard:0
			}
		},
		onLoad() {
			this.getData();
		},
		onReady(){
			setTimeout(() => {
				this.pageOpc=1
			}, 100)
		},
		methods: {
			changeSwitch(e){
				console.log()
				let index=e.target.dataset.index
				let switchValue=e.detail.value
				if(index==1){
					this.task_challenge=Number(switchValue)
				}else if(index==2){
					this.open=Number(switchValue)
				}else if(index==3){
					this.position_navigation=Number(switchValue)
				}else if(index==4){
					this.scoreboard=Number(switchValue)
				}else if(index==5){
					this.contact_customers=Number(switchValue)
				}else if(index==6){
					this.one_click_wifi=Number(switchValue)
				}else if(index==7){
					this.is_open_random_coupon=Number(switchValue)
				}
			},
			getData(){
				this.$request.post(this.$api.abilityArea, {
					store_id: uni.getStorageSync('store_id')
				}, {
					token:true
				}).then(res => {
					let {
						data = {}
					} = res;
					if (res.code==1) {
						data=data.store_quick_enty_info
						this.position_navigation=data.position_navigation||0//位置导航
						this.tuan_verification_coupon=data.tuan_verification_coupon||0//团购验券
						this.contact_customers=data.contact_customers||0//联系客服
						this.one_click_wifi=data.one_click_wifi||0//一键wifi
						this.franchise_consulting=data.franchise_consulting||0//加盟咨询
						this.is_open_random_coupon=data.is_open_random_coupon||0//我要加盟
						this.open=data.open||0//开门
						this.task_challenge=data.task_challenge||0
						this.scoreboard=data.scoreboard||0
					}
				})
			},
			changeStatus(){
				let requestList=[
					{
						filed:"task_challenge",
						status:this.task_challenge
					},
					{
						filed:"open",
						status:this.open
					},
					{
						filed:"position_navigation",
						status:this.position_navigation
					},
					{
						filed:"scoreboard",
						status:this.scoreboard
					},
					{
						filed:"contact_customers",
						status:this.contact_customers
					},
					{
						filed:"one_click_wifi",
						status:this.one_click_wifi
					},
					{
						filed:"i_want_join",
						status:1
					},
					{
						filed:"is_open_random_coupon",
						status:this.is_open_random_coupon
					}
				]
				this.$request.post(this.$api.changeStatus, {
					store_id: uni.getStorageSync('store_id'),
					ability_area_set:JSON.stringify(requestList)
				}, {
					token:true
				}).then(res => {
					let {
						data = {}
					} = res;
					if (res.code==1) {
						this.$tools.showToast('设置成功')
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.content {
		padding: 0 36upx;
		.function-box{
			background: #1D1C5C;
			border-radius: 10upx;
			padding: 30upx;
			.function-item{
				font-size: 24upx;
				color: #FFFFFF;
				height: 100upx;
				line-height: 100upx;
				border-bottom: 1rpx solid #36355E;
				border-left: 1rpx solid #36355E;
				border-right: 1rpx solid #36355E;
				&:nth-of-type(1){
					border-top: 1rpx solid #36355E;
					font-weight: bold;
					font-size: 30upx;
					.th3{
						color: #FFFFFF;
					}
				}
				.th1{
					width: 180upx;
					height: 100upx;
					padding: 0 10upx;
					text-align: center;
					border-right: 1rpx solid #36355E;
				}
				.th2{
					height: 100upx;
					padding: 0 10upx;
					border-right: 1rpx solid #36355E;
					text-align: center;
					flex: 1;
				}
				.th3{
					height: 100upx;
					width: 100upx;
					padding: 0 10upx;
					text-align: center;
					color: #26BCFD;
				}
			}
		}
		.bottom-box{
			height: 120rpx;
			background: #1D1C5C;
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			margin: auto;
			justify-content: center;
			font-size: 32rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			.define-btn{
				font-size: 32rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 80rpx;
				width: 322rpx;
				height: 80rpx;
				background: #26BCFD;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				text-align: center;
			}
		}
	}
</style>
